<!--
 * @Author: your name
 * @Date: 2021-08-10 10:16:21
 * @LastEditTime: 2021-11-12 14:36:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\views\feedBack\turnBug\turnBug.vue
-->
<template>
  <div class="turnBug">
    <div class="header">
      <div class="headerLeft">
        <span class="leftBtn" @click="toBefore"></span>
        <span class="leftTxt">转BUG</span>
      </div>
      <div>
        <el-button type="primary" size="small" @click="SaveBug">发布</el-button>
      </div>
    </div>
    <div class="createWrap">
      <div class="createContainer">
        <el-form
          class="turnBugForm"
          :model="turnBugForm"
          ref="dynamicValidateForm"
          :rules="turnBugFormRules"
          label-position="left"
          label-width="80px"
        >
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="15">
                  <el-form-item label="所属产品" prop="product">
                    <el-select
                      v-model="turnBugForm.product"
                      class="acordProduct"
                      filterable
                      clearable
                      @change="productChange"
                    >
                      <el-option
                        v-for="(item, index) in allProductList"
                        :key="index"
                        :label="item.name"
                        :value="item.productId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="9" class="productBranch">
                  <el-form-item prop="branch" label="产品分支">
                    <el-select
                      v-model="turnBugForm.branch"
                      placeholder="请选择产品分支"
                      class="acordBranch"
                      filterable
                      clearable
                    >
                      <el-option :value="0" label="全部分支"></el-option>
                      <el-option
                        v-for="(item, index) in ProductBranchList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属模块" class="Marketing" prop="module">
                <el-select
                  v-model="turnBugForm.module"
                  placeholder="请选择所属模块"
                  class="userSelect"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="(item, index) in ModuleList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属项目" prop="project">
                <el-select
                  v-model="turnBugForm.project"
                  placeholder="请选择所属项目"
                  class="userSelect"
                  @change="projectChange"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="(item, index) in ProjectList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- TODO 影响版本下拉接口 -->
            <el-col :span="12">
              <el-form-item label="影响版本" prop="openedbuild">
                <el-select
                  v-model="turnBugForm.openedbuild"
                  class="userSelect"
                  placeholder="请选择影响版本"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="(item, index) in VersionByProductAndProjectList"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="当前指派" prop="assignedto">
                <el-select
                  v-model="turnBugForm.assignedto"
                  class="userSelect"
                  placeholder="请选择指派人"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="(item, index) in zenTaoUserList"
                    :key="index"
                    :label="item.value"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="截止日期" prop="deadline" class="deadTime">
                <el-date-picker
                  class="userSelect"
                  :editable="false"
                  v-model="turnBugForm.deadline"
                  :picker-options="pickerOptions"
                  type="date"
                  placeholder=""
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="BUG类型" prop="type">
                <el-select
                  v-model="turnBugForm.type"
                  class="displayThree"
                  placeholder="请选择BUG类型"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="(item, index) in BugTypeList"
                    :key="index"
                    :label="item.valueName"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="操作系统" prop="os">
                <el-select
                  v-model="turnBugForm.os"
                  class="displayThree"
                  placeholder="请选择操作系统"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="(item, index) in BugOsList"
                    :key="index"
                    :label="item.valueName"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发现阶段" prop="browser">
                <el-select
                  v-model="turnBugForm.browser"
                  class="displayThree"
                  placeholder="请选择发现阶段"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="(item, index) in BugDiscoveryStageList"
                    :key="index"
                    :label="item.valueName"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row> </el-row>
          <el-row>
            <el-col :span="14" style="height: 40px">
              <el-form-item label="BUG标题" prop="title">
                <el-input class="bugTitle" v-model="turnBugForm.title" placeholder="请输入BUG标题"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="5">
              <el-form-item label="严重程度" prop="severity">
                <el-select
                  v-model="turnBugForm.severity"
                  class="pointParst"
                  placeholder="严重程度"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="(item, index) in BugSeverityList"
                    :key="index"
                    :label="item.valueName"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="优先级" prop="pri">
                <el-select v-model="turnBugForm.pri" class="pointParst" filterable clearable placeholder="优先级">
                  <el-option
                    v-for="(item, index) in PriList"
                    :key="index"
                    :label="item.valueName"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" style="margin-bottom: 6px">
              <el-form-item label="重现步骤" class="questionDesc" prop="steps">
                <el-upload
                  class="avatar-uploader quill-img"
                  :action="fileUpload"
                  :on-change="imgSaveToUrl"
                  :headers="importHeaders"
                  :show-file-list="false"
                  :on-success="quillImgSuccess"
                  :on-error="uploadError"
                  :before-upload="quillImgBefore"
                  accept=".jpg,.jpeg,.png,.gif"
                ></el-upload>

                <!-- <vue-tinymce v-model="turnBugForm.steps" :setting="setting" /> -->
                <div class="isShowError" style="width: 100%">
                  <quill-editor class="editor" v-model="turnBugForm.steps" ref="quillEditor" :options="editorOption">
                  </quill-editor>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="抄送给" prop="mailto">
                <el-select
                  v-model="turnBugForm.mailto"
                  class="userSelect"
                  placeholder="请选择抄送给"
                  filterable
                  clearable
                  multiple
                >
                  <el-option
                    v-for="(item, index) in zenTaoUserList"
                    :key="index"
                    :label="item.value"
                    :value="item.key"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划解决版本/日期" prop="keywords" class="solutionVersion">
                <el-input
                  class="userSelect"
                  v-model="turnBugForm.keywords"
                  placeholder="例：V2.2.100.0/2019年4月9日"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="height: 65px">
              <el-form-item label="添加附件" class="uploadFiles">
                <br />
                <el-upload
                  class="upload-demo"
                  :action="fileUpload"
                  :on-success="onFileSuccess"
                  :headers="importHeaders"
                  :on-error="onFileError"
                  :file-list="bugFileUploadList"
                  multiple
                  :limit="3"
                >
                  <el-button size="small" type="primary" class="loadFile">点击上传</el-button>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { FeedBack } from '@/api/feedBack/server'
// import axios from "axios"
// 工具栏配置
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
    ['blockquote', 'code-block'], // 引用  代码块
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
    [{ indent: '-1' }, { indent: '+1' }], // 缩进
    [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
    [{ align: [] }], // 对齐方式
    ['clean'], // 清除文本格式
    ['link', 'image'] // 链接、图片、视频
]

export default {
    name: '',
    components: {},
    props: {},
    beforeDestroy() {
        this.bugFileUploadList = []
    },

    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    const _now = Date.now()
                    const seven = 1 * 24 * 60 * 60 * 1000
                    const sevenDays = _now - seven
                    return time.getTime() < sevenDays
                }
            },
            // 本地路径
            localFile: {},
            // 本地图片
            loadImageNow: '',

            /* 得到token */
            importHeaders: { token: JSON.parse(sessionStorage.getItem('USERINFO')).token },

            /* 产品名称 */
            productID: '',
            /* 登录用户信息 */
            userInfo: {},
            /* 转BUG表单 */
            turnBugForm: {
                product: '',
                attachFileIds: [], // 附件Id资源列表
                editorFileIds: [],
                openedby: '', // 创建人
                branch: 0,
                module: '', // 模块
                project: '', // 项目
                openedbuild: '', // 影响版本
                assignedto: '', // 指派人
                deadline: '', // 截止日期
                type: '', // BUG类型
                title: '', // BUG标题
                browser: '', // 发现阶段
                severity: '', // 严重程度
                pri: '', // 优先级
                steps:
          '<strong>[程序版本]</strong><strong><span style="color:red;">(必填)</span></strong><span style="color:black;">：</span><br><strong>[问题描述]</strong><strong><span style="color:red;">(必填)</span></strong><span style="color:black;">：</span><br><strong>[故障日志]</strong><strong><span style="color:red;">(必填)</span></strong><span style="color:black;">：</span><br><strong>[初步分析报告]</strong><strong><span style="color:red;">(必填)</span></strong><span style="color:black;">：</span><br><strong>[附件需上传]</strong><strong><span style="color:red;">(必填)</span></strong><span style="color:black;">：</span><br>', // 重现步骤
                mailto: '', // 抄送给
                keywords: '', // 计划解决版本日期/时间
                os: '', // BUG来源
                feedbackUrl: `${process.env.VUE_APP_BASE_API}`, // 上传路径
                feedbackId: ''
            },
            /* 禅道 */

            /* 禅道 产品的type类型 */
            productType: '',
            // 禅道定制化
            customFlagList: [],
            // 禅道用户列表
            zenTaoUserList: [],
            // 人员列表
            userList: [],
            // 产品详情
            productInfo: {},
            // 禅道计划
            ListProductPlan: [],
            // 禅道模块
            ModuleList: [],
            // 优先级
            PriList: [],
            // 禅道来源
            SourceList: [],
            // 紧急程度
            UrgentList: [],
            // 禅道 产品关联项目
            ProjectList: [],
            // 禅道 发现阶段
            BugDiscoveryStageList: [],
            // 禅道  BUG类型
            BugTypeList: [],
            // 禅道  严重程度
            BugSeverityList: [],
            // 禅道  影响版本
            VersionByProductAndProjectList: [],
            // 禅道  BUG来源
            BugOsList: [],
            // 禅道  产品分支
            ProductBranchList: [],
            // 禅道 文件上传
            fileUpload: `${process.env.VUE_APP_GOLDWIND_BASE_API}/v2/zentao/file/upload`,
            // 附件上传文件列表
            bugFileUploadList: [],
            allProductList: [],

            // 表单验证规则
            turnBugFormRules: {
                product: [
                    {
                        required: true,
                        message: '',
                        trigger: 'change'
                    }
                ],

                module: [{ required: true, message: '', trigger: 'change' }],
                project: [{ required: true, message: '', trigger: 'change' }],
                openedbuild: [{ required: true, message: '', trigger: 'change' }],
                deadline: [{ required: true, message: '', trigger: 'change' }],
                type: [{ required: true, message: '', trigger: 'change' }],
                browser: [{ required: true, message: '', trigger: 'change' }],
                severity: [{ required: true, message: '', trigger: 'change' }],
                pri: [{ required: true, message: '', trigger: 'change' }],
                branch: [{ required: true, message: '', trigger: 'change' }],
                os: [{ required: true, message: '', trigger: 'change' }],
                title: [{ required: true, message: '', trigger: 'change' }],
                keywords: [{ required: false, message: '', trigger: 'change' }]
            },

            // 富文本编辑器
            editorOption: {
                modules: {
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: function(value) {
                                if (value) {
                                    // 触发input框选择图片文件
                                    document.querySelector('.quill-img input').click()
                                } else {
                                    this.quill.format('image', false)
                                }
                            }
                        }
                    }
                }
            }
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        this.GetProductInfo().then(() => {
            this.GetAllProductAsync().then(() => {
                this.GetModuleList()
            })
            this.GetUserList()
            this.GetBugTypeList()
            this.GetBugDiscoveryStageList()
            this.GetBugSeverityList()
            this.GetPriList()
            this.GetBugOsList()
            this.getuserId()
            this.GetListAllUser()
        })
    },
    methods: {
    /**
     * @description: 返回至上一个页面
     */
        toBefore() {
            this.$router.go(-1)
        },

        /**
     * @description: 获取所有产品信息
     */
        async GetAllProductAsync() {
            try {
                const result = await FeedBack.GetAllProductAsync()
                if (result.success) {
                    this.allProductList = result.data
                    // this.allProductList.forEach((item) => {
                    //     if (item.selected == true) {
                    //         this.turnBugForm.product = item.productId
                    //         this.GetProjectList(this.turnBugForm.product)
                    //         this.GetProductBranchList(this.turnBugForm.product)
                    //     }
                    // })
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 监听 产品的改变
     * @param {String} _val 产品ID
     */
        productChange(_val) {
            this.turnBugForm.product = _val
            this.turnBugForm.module = ''
            this.turnBugForm.openedbuild = ''
            this.turnBugForm.project = ''
            this.turnBugForm.branch = 0
            this.ProductBranchList = []
            this.ProjectList = []
            this.VersionByProductAndProjectList = []
            /* 反查产品类型 */
            this.allProductList.forEach(item => {
                if (item.productId == _val) {
                    this.productType = item.type
                }
            })
            /* 重新请求值 */
            this.GetProjectList(_val)

            this.GetModuleList()
            if (this.productType !== 'normal') {
                // 获取产品分支
                this.GetProductBranchList(_val)
            }
        },

        /**
     * @description: 获取当前用户信息
     */
        async getuserId() {
            try {
                const result = await FeedBack.UserGetUserInfoAsync()
                if (result.success) {
                    // console.log('获取当前账号信息', result.data)
                    this.userInfo = result.data
                    this.turnBugForm.openedby = result.data.id
                    this.turnBugForm.feedbackId = this.$route.query.feedbackId
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 获取产品详情
     */
        async GetProductInfo() {
            try {
                const result = await FeedBack.GetProductInfo({
                    productId: this.$route.query.productId
                })
                if (result.success) {
                    this.productInfo = result.data
                    this.productName = this.productInfo.name
                    // this.turnBugForm.product = result.data.productId
                    /* 获取产品类型 */
                    this.productType = result.data.type
                    /*
            判断产品信息的type类型，判断是否有分支
            branch
            normal  ------------ 没有分支
            platform
          */
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 获取产品列表
     */
        async GetUserList() {
            try {
                const result = await FeedBack.GetListItemAsync({
                    id: this.$route.query.productId
                })
                if (result.success) {
                    this.userList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 获取禅道模块
     */
        async GetModuleList() {
            try {
                const result = await FeedBack.GetModuleList({
                    productId: this.turnBugForm.product
                })
                if (result.success) {
                    this.ModuleList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 产品关联项目
     * @param {String} id 产品ID
     */
        async GetProjectList(id) {
            try {
                const result = await FeedBack.GetProjectList({ id: id })
                if (result.success) {
                    this.ProjectList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 发现阶段下拉
     */
        async GetBugDiscoveryStageList() {
            try {
                const result = await FeedBack.GetBugDiscoveryStageList()
                if (result.success) {
                    this.BugDiscoveryStageList = result.data
                    this.turnBugForm.browser = 'outside'
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 禅道 BUG类型
     */
        async GetBugTypeList() {
            try {
                const result = await FeedBack.GetBugTypeList()
                if (result.success) {
                    this.BugTypeList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 禅道 严重程度
     */
        async GetBugSeverityList() {
            try {
                const result = await FeedBack.GetBugSeverityList()
                if (result.success) {
                    this.BugSeverityList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
         * @description: 禅道 优先级
         *
        /* 禅道 优先级 */
        async GetPriList() {
            try {
                const result = await FeedBack.GetPriList()
                if (result.success) {
                    this.PriList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 监听 项目改变更新影响版本下拉
     *@param {String} _val 项目ID
     */
        projectChange(_val) {
            // console.log(_val)
            this.VersionByProductAndProjectList = []
            // 获取版本
            this.GetVersionByProductAndProjectList(_val)
        },

        /**
     * @description: 禅道 影响版本
     * @param {String} _val
     */
        async GetVersionByProductAndProjectList(_val) {
            try {
                const result = await FeedBack.GetVersionByProductAndProjectList({
                    productId: this.turnBugForm.product,
                    projectId: _val
                })
                if (result.success) {
                    this.VersionByProductAndProjectList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 禅道 BUG来源
     */
        async GetBugOsList() {
            try {
                const result = await FeedBack.GetBugOsList()
                if (result.success) {
                    this.BugOsList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },
        /**
     * @description: 禅道用户列表
     */
        async GetListAllUser() {
            try {
                const result = await FeedBack.GetListAllUser()
                if (result.success) {
                    this.zenTaoUserList = result.data
                    // console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 禅道 产品分支
     * @param {String} _id 产品ID
     * @return {*}
     */
        async GetProductBranchList(_id) {
            try {
                const result = await FeedBack.GetProductBranchList({ productId: _id })
                if (result.success) {
                    // let branchArray=
                    this.ProductBranchList = result.data
                }
            } catch (err) {
                console.log(err)
            }
        },
        /**
     * @description: 禅道 确认转BUG
     */
        SaveBug() {
            console.log(this.turnBugForm)
            this.$refs['dynamicValidateForm'].validate(valid => {
                if (valid) {
                    this.turnBug()
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },

        /**
     * @description: 转BUG方法
     */
        async turnBug() {
            const loading = this.$loading({
                lock: true,
                text: '数据加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            this.turnBugForm.feedbackUrl += `Details?feedBackId=${this.$route.query.feedbackId}`
            const amrStr = this.turnBugForm.mailto.toString()
            this.turnBugForm.mailto = amrStr
            try {
                const result = await FeedBack.ChangeBug(this.turnBugForm)
                if (result.success) {
                    // 转bug成功之后,清除文件内容,避免出错
                    loading.close()
                    this.bugFileUploadList = []
                    this.$router.go(-1)
                    // localStorage.setItem('fir', '转BUG')
                } else {
                    this.$message.error(result.message)
                    loading.close()
                }
            } catch (err) {
                console.log(err)
            }
        },

        /**
     * @description: 附件上传成功钩子函数
     * @param {Object} _response 文件上传成功返回的参数
     * @param {Object} _file 上传成功的文件
     * @param {Array} _fileList 加载器内存储的文件列表
     */
        onFileSuccess(_response, _file, _fileList) {
            console.log(_response, _file, _fileList)
            if (_response.errcode == '0') {
                this.bugFileUploadList.push({
                    url: _response.data.imgUrl,
                    name: _response.data.title + '.' + _response.data.extension
                })
                this.turnBugForm.attachFileIds.push(_response.data.id)
                // TODO: 文件上传成功提示
                this.$message.success('文件上传成功')
            } else {
                this.$message.error(_response.message || '上传失败')
            }
        },

        /**
     * @description: 附件上传失败的钩子函数
     */
        onFileError() {},

        /**
     * @description: 重现描述文本框 文件上传之前的钩子函数
     * @param {file} file
     */
        quillImgBefore(file) {
            // console.log(file)
            const fileType = file.type
            if (fileType === 'image/jpeg' || fileType === 'image/png') {
                return true
            } else {
                this.$message.error('请插入图片类型文件(jpg/jpeg/png)')
                return false
            }
        },
        /**
     * @description: 重现描述文本框 文件上传成功的钩子函数
     * @param {Object} res 文件上传成功返回的参数
     * @return {*}
     */
        quillImgSuccess(res) {
            // 如果上传成功
            // 获取富文本组件实例
            const quill = this.$refs.quillEditor.quill
            if (res.errcode == '0') {
                // console.log(res.data.id)
                // TODO: 文件上传成功提示
                this.$message.success('文件上传成功')
                const range = quill.getSelection()
                quill.insertEmbed(range.index, 'image', res.data.imgUrl)
                // 调整光标到最后
                quill.setSelection(length + 1)
                this.turnBugForm.editorFileIds.push(res.data.id)
            } else {
                this.$message.error('图片插入失败')
            }
        },

        /**
     * @description: 重现描述文本框 文件上传图片失败的钩子函数
     */
        // 富文本图片上传失败
        uploadError() {
            // loading动画消失
            this.$message.error('图片插入失败')
        },

        /**
     * @description: 重现富文本框 文件状态改变的钩子函数
     * @param {file} file
     */
        imgSaveToUrl(file) {
            // 也可以用file
            this.localFile = file.raw // 或者

            // 转换操作可以不放到这个函数里面，
            // 因为这个函数会被多次触发，上传时触发，上传成功也触发
            const reader = new FileReader()
            reader.readAsDataURL(this.localFile) // 这里也可以直接写参数event.raw

            // 转换成功后的操作，reader.result即为转换后的DataURL ，
            // 它不需要自己定义，你可以console.log(reader.result)看一下
            reader.onload = () => {
                // console.log(reader.result)
                this.loadImageNow = reader.result
            }
        }
    }
}
</script>
<style scoped lang="less" src="./turnBug.less"></style>
<style scoped>
::v-deep .ql-editor li {
  list-style-type: decimal !important;
  list-style-position: inside !important;
}
::v-deep .ql-editor ul > li:before {
  content: '\2022';
}

::v-deep .ql-editor ul > li::marker {
  content: '';
  display: none;
}

::v-deep .ql-editor li:before {
  display: inline-block;
  white-space: nowrap;
  width: 1.2em;
}
</style>
